<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" top="0">
      <el-form labelWidth="100px">
        <el-form-item label="人员状态" class="is-required">
          <el-select v-model.trim="$v.newpersonData.usertype.$model" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in usetypeArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.newpersonData.usertype.required">
            请选择人员状态
          </div>
        </el-form-item>
        <el-form-item label="人员编号" class="is-required">
          <el-input v-model="newpersonData.userid" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.newpersonData.userid.required">
            人员编号不能为空
          </div>
          <div class="el-form-item__error" v-if="!$v.newpersonData.userid.alphaNum">
            请输入正确人员编号
          </div>
        </el-form-item>

        <el-form-item label="性别" class="is-required">
          <div>
            <el-radio v-model="newpersonData.sex" label="男">男</el-radio>
            <el-radio v-model="newpersonData.sex" label="女">女</el-radio>
          </div>
          <div class="el-form-item__error" v-if="!$v.newpersonData.sex.required">
            请选择性别
          </div>
        </el-form-item>
        <el-form-item label="姓名" class="is-required">
          <el-input v-model.trim="$v.newpersonData.username.$model" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.newpersonData.username.required">
            请输入姓名
          </div>
          <div class="el-form-item__error" v-if="!$v.newpersonData.username.name">
            姓名格式有误
          </div>
        </el-form-item>
        <el-form-item label="身份证号" class="is-required">
          <el-input v-model="newpersonData.idnumber" clearable @change="changeidnumber"></el-input>
          <div class="el-form-item__error" v-if="showiderror">
            {{showiderrormsg}}
          </div>
        </el-form-item>

        <el-form-item label="出生日期" clearable>
          <el-date-picker
            disabled
            v-model="newpersonData.birthdate"
            type="date"
            valueFormat="yyyy-MM-dd"
            style="width:100%"
            placeholder="选先输入身份证号"
          ></el-date-picker>

        </el-form-item>

        <!-- <el-form-item label="年龄">
          <el-input v-model="newpersonData.age" clearable></el-input>
        </el-form-item> -->


        <el-form-item label="入职时间" class="is-required">
          <el-date-picker
            style="width:100%"
            clearable
            valueFormat="yyyy-MM-dd"
            v-model="newpersonData.entry_time"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.newpersonData.entry_time.required">
            请选择入职日期
          </div>
        </el-form-item>
        <el-form-item label="政治面貌" class="is-required">
          <el-input v-model="newpersonData.appearance" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.newpersonData.appearance.required">
            请输入政治面貌
          </div>
        </el-form-item>
        <el-form-item label="岗位" class="is-required">
          <!-- <el-input v-model="newpersonData.occupation" clearable></el-input> -->
          <el-select v-model="newpersonData.occupation" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in occupationArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.newpersonData.occupation.required">
            请选择岗位
          </div>
        </el-form-item>
        <el-form-item label="职务" class="is-required">
          <!-- <el-input v-model="newpersonData.occupation" clearable></el-input> -->
          <el-select v-model="newpersonData.positional" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in positionalArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_name"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.newpersonData.positional.required">
            请选择职务
          </div>
        </el-form-item>

        <el-form-item label="所在部门" class="is-required">
          <selectorg @getselectorgid="getselectorgid" :itemorgid="newpersonData.dept"></selectorg>
          <div class="el-form-item__error" v-if="!$v.newpersonData.dept.required">
            请选择所在部门
          </div>
        </el-form-item>
        <el-form-item label="技术职称" class="is-required">
          <el-select v-model="newpersonData.tec_title" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in tecArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.newpersonData.tec_title.required">
            请选择技术职称
          </div>
        </el-form-item>
        <el-form-item label="联系地址" class="is-required">
          <el-input v-model="newpersonData.address" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.newpersonData.address.required">
            请输入联系地址
          </div>
        </el-form-item>
        <el-form-item label="联系方式" class="is-required">
          <el-input v-model="newpersonData.telephone" clearable></el-input>
          <div class="el-form-item__error" v-if="!$v.newpersonData.telephone.required">
            请输入联系方式
          </div>
          <div class="el-form-item__error" v-if="!$v.newpersonData.telephone.phone">
            请输入正确的联系方式
          </div>
        </el-form-item>

        <el-form-item label="先学历">
          <p>学历:</p>
          <el-select
            v-model="newpersonData.first_education"
            placeholder="请选择"
            style="width:100%"
            clearable
          >
            <el-option
              v-for="item in educationArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <p>毕业时间：</p>
          <el-date-picker
            style="width:100%"
            clearable
            valueFormat="yyyy-MM-dd"
            v-model="newpersonData.first_gradutetime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          <p>毕业院校：</p>
          <el-input v-model="newpersonData.first_school" clearable></el-input>
          <p>专业:</p>
          <el-input v-model="newpersonData.first_major" clearable></el-input>
        </el-form-item>
        <el-form-item label="后学历">
          <p>学历:</p>
          <el-select
            v-model="newpersonData.last_education"
            placeholder="请选择"
            style="width:100%"
            clearable
          >
            <el-option
              v-for="item in educationArr"
              :key="item.value"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
          <p>毕业时间：</p>
          <el-date-picker
            clearable
            valueFormat="yyyy-MM-dd"
            style="width:100%"
            v-model="newpersonData.last_gradutetime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          <p>毕业院校：</p>
          <el-input v-model="newpersonData.last_school" clearable></el-input>
          <p>专业:</p>
          <el-input v-model="newpersonData.last_major" clearable></el-input>
        </el-form-item>
        <el-form-item label="电子签名">
          <upload2 :filelimit="1" :filelink.sync="signaturearr" :isedit="false" :ispic="true"
            :isdowload="true"
          ></upload2>
        </el-form-item>
        <el-form-item label="身份证">
          <upload2 :filelimit="1" :filelink.sync="idcardurlarr" :isedit="false" :isdowload="false"
            :ispic="true"
          ></upload2>
        </el-form-item>
        <el-form-item label="照片">
          <upload2 :filelimit="1" :filelink.sync="photoarr" :isedit="false" :ispic="true"
            :isdowload="true"
          ></upload2>
        </el-form-item>
        <el-form-item label="">
          <div style="height:150px"></div>
        </el-form-item>
      </el-form>
      <div style="text-align:right">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitnewperson" v-if="!isedit">确 定</el-button>
        <el-button size="mini" type="primary" @click="submiteditperson" v-else>保 存</el-button>
      </div>
      <div style="padding:0 30px">
        <p class="tablediv">劳动合同</p>
        <labortable :tableData="laborlist" :pagobj="pagobj" :ischeck="true"></labortable>
        <p class="tablediv">技术职称</p>
        <posttable :tableData="postlist" :pagobj="pagobj" :ischeck="true"></posttable>
        <p class="tablediv">职业资格</p>
        <statustable :tableData="statuslist" :pagobj="pagobj" :ischeck="true"></statustable>
        <p class="tablediv">上岗证</p>
        <licensetable :tableData="licenselist" :pagobj="pagobj" :ischeck="true"></licensetable>
        <p class="tablediv">培训计划</p>
        <plantable2 :plantable="plantable" :pagobj="pagobj" :ischeck="true"></plantable2>
        <p class="tablediv">个人业绩</p>
        <pertable :tableData="performancelist" :pagobj.sync="pagobj" :ischeck="true"></pertable>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitnewperson" v-if="!isedit">确 定</el-button>
        <el-button size="mini" type="primary" @click="submiteditperson" v-else>保 存</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>

import selectorg from '~/components/common/selectorg.vue';
import upload2 from '~/components/common/upload2.vue';
import labortable from '~/components/person/laborbargin/labortable.vue';
import posttable from '~/components/person/workpost/posttable.vue';
import statustable from '~/components/person/jobstatus/statustable.vue';
import licensetable from '~/components/person/license/licensetable.vue';
import plantable2 from '~/components/person/workplan2/plantable2.vue';
import pertable from '~/components/person/performance/pertable.vue';
import { required, alphaNum } from 'vuelidate/lib/validators';
import { regex } from 'vuelidate/lib/validators/common.js';

const phone = regex('phoneNumber', /^1(3|4|5|6|7|8|9)\d{9}$/);
const name = regex('name', /^[\u4e00-\u9fa5]{2,4}$/);
export default {
  components: {
    selectorg,
    upload2,
    labortable,
    posttable,
    statustable,
    licensetable,
    plantable2,
    pertable,
  },
  props: {
    editdata: Object,
    isedit: Boolean,
  },
  validations: {
    newpersonData: {
      username: {
        required,
        name,
      },
      usertype: {
        required,
      },
      userid: {
        required,
        alphaNum,
      },
      sex: {
        required,
      },
      birthdate: {
        required,
      },
      idnumber: {
        required,
      },
      positional: {
        required,
      },
      entry_time: {
        required,
      },
      appearance: {
        required,
      },
      dept: {
        required,
      },
      tec_title: {
        required,
      },
      occupation: {
        required,
      },
      telephone: {
        required,
        phone,
      },
      address: {
        required,
      },
    },
  },
  data() {
    return {
      title: '新增人员(初始密码为 123456)',

      showiderror: false,
      showiderrormsg: '请输入身份证号码',
      ts: this.newStore(),
      dialogVisible: true,

      newpersonData: {
        usertype: '',
        username: '',
        userid: '',
        sex: '',
        birthdate: '',
        idnumber: '',
        first_education: '',
        first_gradutetime: '',
        first_school: '',
        first_major: '',
        last_education: '',
        last_gradutetime: '',
        last_school: '',
        last_major: '',
        entry_time: '',
        appearance: '',
        dept: '',
        tec_title: '',
        occupation: '',
        telephone: '',
        address: '',
      },
      idcardurlarr: [],
      signaturearr: [],
      photoarr: [],
      selectdata: {},
      usetypeArr: [],
      tecArr: [],
      educationArr: [],
      occupationArr: [],
      positionalArr: [],
      laborlist: [],
      postlist: [],
      statuslist: [],
      licenselist: [],
      plantable: [],
      performancelist: [],
      pagobj: { // 分页
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },

    };
  },
  created() {
    this.getcodeData('0204', '02', 'usetypeArr');
    this.getcodeData('0208', '02', 'occupationArr');
    this.getcodeData('0209', '02', 'positionalArr');
    this.getcodeData('0202', '02', 'tecArr');
    this.getcodeData('0201', '02', 'educationArr');
    if (this.isedit) {
      this.getlaborlist();
      this.getpostlist();
      this.getstatuslist();
      this.getlicenselist();
      this.getplanlist();
      this.getperformancelist();

      this.title = '编辑人员';
      this.newpersonData = Object.assign({}, this.editdata);
      if (this.newpersonData.signature == '') {
        this.signaturearr = [];
      } else {
        this.signaturearr = [{
          url: '',
          name: '',
        }];
        this.signaturearr[0].url = this.newpersonData.signature;
      }

      if (this.newpersonData.idcardpic == '') {
        this.idcardurlarr = [];
      } else {
        this.idcardurlarr = [{
          url: '',
          name: '',
        }];
        this.idcardurlarr[0].url = this.newpersonData.idcardpic;
      }
      if (this.newpersonData.photo == '') {
        this.photoarr = [];
      } else {
        this.photoarr = [{
          url: '',
          name: '',
        }];
        this.photoarr[0].url = this.newpersonData.photo;
      }
    }
  },
  methods: {
    checkprop() {
      console.log(this.$v.$invalid);
    },
    getperformancelist() {
      const req = {
        handle:
          'D328E4C742B794043F60211ED98E8FE473936C62493B31D1F6486B1D96ED9F7E',
        start: '0',
        limit: '100000',
        status: '1',
        pid: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.performancelist = ts.d.data.operation1;
      });
    },
    // 获取培训计划列表
    getplanlist() {
      const req = {
        handle:
          '33224548EFC2E94FE9F3B6004AA9373090D3E1223364DCF2BFF0B9210751F692',
        start: '0',
        limit: '100000',
        personid: this.editdata.pid,
        person2id: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.plantable = ts.d.data.operation1;
      });
    },
    // 获取列表
    getlicenselist() {
      const req = {
        handle:
          '1CB43CC1631B5D5B14CBF34BC23B86F231062A3F18BDCAFA39249CF3DA4DD76E44B455B1B2775577',
        start: '0',
        limit: '100000',
        pid: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.licenselist = ts.d.data.operation1;
      });
    },
    // 获取列表
    getstatuslist() {
      const req = {
        handle:
          '1CB43CC1631B5D5B8DDD57687CDE4AC73F156CD5A96D26B9CD3A43E9777C4E90',
        start: '0',
        limit: '100000',
        pid: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.statuslist = ts.d.data.operation1;
      });
    },
    // 获取列表
    getpostlist() {
      console.log('2222');
      const req = {
        handle:
          '1CB43CC1631B5D5B6D910BDD88FB08CC450715EB6255AFE3AA93D3E1306FF758',
        start: '0',
        limit: '100000',
        pid: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.postlist = ts.d.data.operation1;
      });
    },
    // 获取列表
    getlaborlist() {
      const req = {
        handle:
          '09D3B9E20F101E11DEFE3350091AFF9B724AECA2C1F5AF24BF35823F59EB452A',
        start: '0',
        limit: '100000',
        pid: this.editdata.pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.laborlist = ts.d.data.operation1;
      });
    },
    changeidnumber(val) {
      if (this.testid(val).status == '1') {
        this.showiderror = false;

        const substr = val.substring(6, 14);
        const valyear = val.substring(6, 10);
        const valmonth = val.substring(10, 12);
        const valday = val.substring(12, 14);
        console.log(substr, '通过的id');
        this.newpersonData.birthdate = `${valyear}-${valmonth}-${valday}`;
      } else {
        this.newpersonData.birthdate = '';
        this.showiderror = true;
        this.showiderrormsg = this.testid(val).msg;
      }
    },
    // 身份证校验
    testid(id) {
      // 1 "验证通过!", 0 //校验不通过 // id为身份证号码
      const format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
      // 号码规则校验
      if (!format.test(id)) {
        return { status: 0, msg: '身份证号码不合规' };
      }
      // 区位码校验
      // 出生年月日校验  前正则限制起始年份为1900;
      let year = id.substr(6, 4), // 身份证年
        month = id.substr(10, 2), // 身份证月
        date = id.substr(12, 2), // 身份证日
        time = Date.parse(`${month}-${date}-${year}`), // 身份证日期时间戳date
        now_time = Date.parse(new Date()), // 当前时间戳
        dates = (new Date(year, month, 0)).getDate();// 身份证当月天数
      if (time > now_time || date > dates) {
        return { status: 0, msg: '出生日期不合规' };
      }
      // 校验码判断
      const c = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); // 系数
      const b = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); // 校验码对照表
      const id_array = id.split('');
      let sum = 0;
      for (let k = 0; k < 17; k++) {
        sum += parseInt(id_array[k]) * parseInt(c[k]);
      }
      if (id_array[17].toUpperCase() != b[sum % 11].toUpperCase()) {
        return { status: 0, msg: '身份证号不合规' };
      }
      return { status: 1, msg: '校验通过' };
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    getselectorgid(val) {
      this.newpersonData.dept = val;
      console.log(this.newpersonData.dept);
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    // 提交人员申请
    submitnewperson() {
      // this.signaturearr = [];
      // this.photoarr = [];
      // this.idcardurlarr = [];
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认新增?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            if (this.idcardurlarr.length == 0) {
              this.idcardurlarr = [{ url: '' }];
            }
            if (this.photoarr.length == 0) {
              this.photoarr = [{ url: '' }];
            }
            if (this.signaturearr.length == 0) {
              this.signaturearr = [{ url: '' }];
            }
            const req = {
              handle:
              '33224548EFC2E94F8BCA03EC613FED98DA21E470CFE3DAE0FD58B6E268D37EF8',
              usertype: this.newpersonData.usertype,
              userid: this.newpersonData.userid,
              username: this.newpersonData.username,
              sex: this.newpersonData.sex,
              birthdate: this.newpersonData.birthdate,
              idnumber: this.newpersonData.idnumber,
              first_education: this.newpersonData.first_education,
              first_gradutetime: this.newpersonData.first_gradutetime,
              first_school: this.newpersonData.first_school,
              first_major: this.newpersonData.first_major,
              last_education: this.newpersonData.last_education,
              last_gradutetime: this.newpersonData.last_gradutetime,
              last_school: this.newpersonData.last_school,
              last_major: this.newpersonData.last_major,
              entry_time: this.newpersonData.entry_time,
              appearance: this.newpersonData.appearance,
              positional: this.newpersonData.positional,
              dept: this.newpersonData.dept,
              tec_title: this.newpersonData.tec_title,
              occupation: this.newpersonData.occupation,
              address: this.newpersonData.address,
              telephone: this.newpersonData.telephone,
              idcardpic: this.idcardurlarr[0].url,
              photo: this.photoarr[0].url,
              signature: this.signaturearr[0].url,
              passwords: '123456',
            };
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.$parent.getpersonlist();
              this.dialogVisible = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
    // 提交编辑
    submiteditperson() {
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            if (this.idcardurlarr.length == 0) {
              this.idcardurlarr = [{ url: '' }];
            }
            if (this.photoarr.length == 0) {
              this.photoarr = [{ url: '' }];
            }
            if (this.signaturearr.length == 0) {
              this.signaturearr = [{ url: '' }];
            }
            const req = {
              handle:
              '33224548EFC2E94F0E5A626014E7F81BCB3A0D181E152E1F60504B5A8F8A9E62',
              pid: this.newpersonData.pid,
              usertype: this.newpersonData.usertype,
              userid: this.newpersonData.userid,
              username: this.newpersonData.username,
              sex: this.newpersonData.sex,
              birthdate: this.newpersonData.birthdate,
              idnumber: this.newpersonData.idnumber,
              first_education: this.newpersonData.first_education,
              first_gradutetime: this.newpersonData.first_gradutetime,
              first_school: this.newpersonData.first_school,
              first_major: this.newpersonData.first_major,
              last_education: this.newpersonData.last_education,
              last_gradutetime: this.newpersonData.last_gradutetime,
              last_school: this.newpersonData.last_school,
              last_major: this.newpersonData.last_major,
              entry_time: this.newpersonData.entry_time,
              appearance: this.newpersonData.appearance,
              positional: this.newpersonData.positional,
              dept: this.newpersonData.dept,
              tec_title: this.newpersonData.tec_title,
              occupation: this.newpersonData.occupation,
              address: this.newpersonData.address,
              telephone: this.newpersonData.telephone,
              // idcardurl: this.posturl(this.idcardurlarr),
              // idcardname: this.postname(this.idcardurlarr),
              idcardpic: this.idcardurlarr[0].url,
              photo: this.photoarr[0].url,
              signature: this.signaturearr[0].url,
            };
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功',
              });
              this.$parent.getpersonlist();
              this.dialogVisible = false;
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.tablediv{
  clear: both;
  color:#686868;
  font-size: 18px;
  padding: 10px 0;
  font-weight: bold;
  border-bottom: 1px solid #f1f1f1;
  text-align: left;
  margin-top: 20px;
}
</style>
